<!--
 * @Author: 亚亚
-->
<!--
 * @Author: 亚亚
-->
<template>
  <template v-if="props.selectOptions?.options?.length">
    <el-select v-model="selectVal" v-bind="props.selectOptions">
      <el-option
        v-for="item in props.selectOptions.options"
        :label="item[props.selectOptions.props.label || 'label']"
        :value="item[props.selectOptions.props.value || 'value']"
      />
    </el-select>
  </template>
  <el-date-picker
    v-model="currentVal"
    v-bind="$attrs"
    :style="props.style"
  />
</template>

<script lang="ts" setup>
import { props as datePickerProps } from './index'
const props = defineProps(datePickerProps)
const emit = defineEmits(['update:modelValue', 'changeSelect'])
const currentVal = ref(props.modelValue)

//如果是selectOptions则值不从searchData传入，因为component.v-model只能绑定一个
const selectVal = ref(props.selectOptions?.modelValue) 

//监听父组件的值
watch(() => props.modelValue, () => {
  currentVal.value = props.modelValue
})
//监听select的值并传递给父组件
watch(()=> selectVal.value, (val) => {
  emit('changeSelect', {val, selectOptions: props.selectOptions})
})
// 通过emit将值传递给父组件
emit("update:modelValue", currentVal)
</script>